import 'package:flutter/material.dart';

// 定义一个 StatelessWidget，用于展示 Sliver 布局模型
class SliverPage extends StatelessWidget {
  // 构造函数，接收一个可选的 key 参数
  const SliverPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 返回一个 Scaffold 组件，它提供了基本的应用栏、抽屉等 Material Design 布局结构
    return Scaffold(
      // 主体内容使用 CustomScrollView，它允许你组合多种滚动效果和 Sliver 组件
      body: CustomScrollView(
        // slivers 属性接收一个 Sliver 组件列表
        slivers: <Widget>[
          // SliverAppBar 是一个可伸缩的应用栏，通常用作 CustomScrollView 的第一个 Sliver
          const SliverAppBar(
            // pinned 设置为 true，当列表向上滚动时，AppBar 会固定在顶部
            pinned: true,
            // expandedHeight 设置 AppBar 在完全展开时的高度
            expandedHeight: 150.0,
            // flexibleSpace 用于定义 AppBar 的可伸缩区域内容
            flexibleSpace: FlexibleSpaceBar(
              // title 设置 AppBar 的标题
              title: Text('Sliver 布局模型'),
              // titlePadding 设置标题的内边距
              titlePadding:
                  EdgeInsetsDirectional.only(start: 16.0, bottom: 16.0),
              // centerTitle 设置标题是否居中，可以根据需要调整
              centerTitle: true,
              // background 设置 AppBar 在展开时的背景内容，这里使用 FlutterLogo 作为示例
              background: FlutterLogo(),
            ),
          ),
          // SliverList 是一个 Sliver 版本的 ListView，用于在 CustomScrollView 中显示列表项
          // 它具有懒加载特性，只构建和渲染当前可见的列表项，从而提高性能
          SliverList(
            // delegate 用于构建列表项
            delegate: SliverChildBuilderDelegate(
              // (BuildContext context, int index) 是一个构建器函数，
              // 它接收当前的 BuildContext 和列表项的索引，并返回一个 Widget
              (BuildContext context, int index) {
                // 返回一个 ListTile 组件作为列表项
                return ListTile(
                  // title 显示列表项的文本内容，这里显示索引号
                  title: Text('Sliver 列表项 #${index + 1}'),
                );
              },
              // childCount 指定列表项的总数
              childCount: 1000,
            ),
          ),
        ],
      ),
    );
  }
}
